<template>
    <view class="orderPage">
        <view class="order-top">
            <view class="headerNavbar" :style="{ height: navbarHeight + 'px' }">
                <view class="titleBar" :style="{ height: capsuleHeight + 'px', top: TimeBarHeight + 'px' }">
                    <image src="../../static/bar/back.png" mode="" @click="goback"></image>
                    <view class="title">
                        <text :class="{ active: activeTab === 'hotel' }" @click="changeTab('hotel')">酒旅订单</text>
                        <text :class="{ active: activeTab === 'equip' }" @click="changeTab('equip')">装备订单</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="order-content" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
            <swiper :current="currentSwiper" @change="onSwiperChange" :indicator-dots="false" swipe-threshold="50"
                class="swiper-container" :style="`min-height: calc(100vh - ${navbarHeight}px)`">
                <!-- 酒旅订单页面 -->
                <swiper-item style="overflow-y: auto !important;">
                    <view class="orderPage-content">
						<view class="header-filter">
							<view class="search-box">
							    <uni-search-bar v-model="searchDataHotel" placeholder="搜索酒旅订单" @confirm="search('hotel')"
							        cancelButton="none" bgColor="#e5e5e5" radius="100">
							        <uni-icons slot="searchIcon" color="#717171" size="18" type="home" />
							    </uni-search-bar>
							</view>
							<view class="Select-status">
							    <text :class="{ 'status-active': selectedStatusHotel === 'all' }" @click="changeStatus('all', 'hotel')">全部</text>
							    <text :class="{ 'status-active': selectedStatusHotel === '3' }" @click="changeStatus('3', 'hotel')">已完成</text>
							    <text :class="{ 'status-active': selectedStatusHotel === '1' }" @click="changeStatus('1', 'hotel')">待付款</text>
							    <text :class="{ 'status-active': selectedStatusHotel === '4' }" @click="changeStatus('4', 'hotel')">退款/售后</text>
							</view>
						</view>
                        <view class="orderCard-box">
                            <view v-if="hotelOrders.length === 0" class="isNull">
                                <image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png" mode=""></image>
                                <text>暂无订单...</text>
                            </view>
                            <view v-else class="content-box" :style="`min-height: calc(100vh - ${navbarHeight}px - 212rpx)`">
                                <hotelOrderVue :orders="filteredHotelOrders" :orderType="orderType" @refreshOrders="refreshOrders"></hotelOrderVue>
                            </view>
                        </view>
                    </view>
                </swiper-item>
                <!-- 装备订单页面 -->
                <swiper-item style="overflow-y: auto !important;">
                    <view class="orderPage-content">
						<view class="header-filter">
							<view class="search-box">
							    <uni-search-bar v-model="searchDataEquip" placeholder="搜索装备订单" @confirm="search('equip')"
							        cancelButton="none" bgColor="#e5e5e5" radius="100">
							        <uni-icons slot="searchIcon" color="#717171" size="18" type="home" />
							    </uni-search-bar>
							</view>
							<view class="Select-status">
							    <text :class="{ 'status-active': selectedStatusEquip === 'all' }" @click="changeStatus('all', 'equip')">全部</text>
							    <text :class="{ 'status-active': selectedStatusEquip === 'signed' }" @click="changeStatus('signed', 'equip')">待签约</text>
							    <text :class="{ 'status-active': selectedStatusEquip === 'pending' }" @click="changeStatus('pending', 'equip')">待付款</text>
							    <text :class="{ 'status-active': selectedStatusEquip === 'refund' }" @click="changeStatus('refund', 'equip')">退款/售后</text>
							</view>
						</view>
                        <view class="orderCard-box">
                            <view v-if="equipOrders.length === 0" class="isNull">
                                <image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png" mode=""></image>
                                <text>暂无订单...</text>
                            </view>
                            <view v-else class="content-box" :style="`min-height: calc(100vh - ${navbarHeight}px - 212rpx)`">
                                <equipOrderVue :orders="filteredEquipOrders"></equipOrderVue>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>


<script setup>
	import { ref, computed } from 'vue';
	import {onShow} from '@dcloudio/uni-app'
	import { TimeBarHeight, capsuleHeight, navbarHeight } from '@/config/systemInfo.js';
	import { getOrders } from '@/config/API/Orders.js'; 
	import hotelOrderVue from './components/hotelOrder.vue';
	import equipOrderVue from './components/equipOrder.vue';

	// 订单类型
	const orderType = ref()
	
	// 初始选择酒旅订单
	const activeTab = ref('hotel');
	// 当前 swiper 索引
	const currentSwiper = ref(0);

	// 搜索数据
	const searchDataHotel = ref('');
	const searchDataEquip = ref('');

	// 订单状态
	const selectedStatusHotel = ref('all');
	const selectedStatusEquip = ref('all');

	// 订单数据
	const hotelOrders = ref([]);
	const equipOrders = ref([]);

	// 切换活动标签
	const changeTab = (tab) => {
		activeTab.value = tab;
		currentSwiper.value = tab === 'hotel' ? 0 : 1;
	};

	// 监听 swiper 切换
	const onSwiperChange = (e) => {
		const current = e.detail.current;
		currentSwiper.value = current;
		activeTab.value = current === 0 ? 'hotel' : 'equip';
	};

	// 切换订单状态
	const changeStatus = (status, type) => {
		if (type === 'hotel') {
			selectedStatusHotel.value = status;
		} else if (type === 'equip') {
			selectedStatusEquip.value = status;
		}
	};
	
	// 页面显示时加载订单数据
	onShow(async() => {
		const userInfo = uni.getStorageSync('userInfo');
		try {
			if(activeTab.value == 'hotel'){
				orderType.value = 1
			}else{
				orderType.value  = 2
			}
			const OrderForm ={
				wechat_user_id:userInfo.id,
				order_shop_type:orderType.value
			}
			// 获取酒旅订单
			const resHotel = await getOrders(OrderForm);
			hotelOrders.value = resHotel.data;
			console.log('酒旅订单数据', hotelOrders.value);

			// // 获取装备订单
			// const resEquip = await getEquipOrders(userId.value);
			// equipOrders.value = resEquip.data;
			// console.log('装备订单数据', equipOrders.value);
		} catch (error) {
			console.error('获取订单数据失败', error);
		}
	});

	// 搜索订单
	const search = (type) => {
		if (type === 'hotel') {
			// 处理酒旅订单搜索逻辑
			// 例如，可以调用 API 或在本地过滤
		} else if (type === 'equip') {
			// 处理装备订单搜索逻辑
		}
	};

	// 父组件接收到子组件的事件后重新请求数据
	const refreshOrders = async () => {
		const userInfo = uni.getStorageSync('userInfo');
		try {
			const OrderForm = {
				wechat_user_id: userInfo.id,
				order_shop_type: orderType.value, 
			};
			const resHotel = await getOrders(OrderForm);
			hotelOrders.value = resHotel.data;
			console.log('订单已更新', hotelOrders.value);
		} catch (error) {
			console.error('获取订单数据失败', error);
		}
	};
	// 过滤订单数据
	const filteredHotelOrders = computed(() => {
		return hotelOrders.value.filter(order => {
			// 根据 selectedStatusHotel 和 searchDataHotel 进行过滤
			// console.log('selectedStatusHotel.value',selectedStatusHotel.value);
			// console.log('order',order);
			let statusMatch = selectedStatusHotel.value === 'all' || order.state_order === selectedStatusHotel.value;
			let searchMatch = searchDataHotel.value === '' || order.name.includes(searchDataHotel.value);
			return statusMatch && searchMatch;
		});
	});

	const filteredEquipOrders = computed(() => {
		return equipOrders.value.filter(order => {
			// 根据 selectedStatusEquip 和 searchDataEquip 进行过滤
			let statusMatch = selectedStatusEquip.value === 'all' || order.status === selectedStatusEquip.value;
			let searchMatch = searchDataEquip.value === '' || order.name.includes(searchDataEquip.value);
			return statusMatch && searchMatch;
		});
	});

	// 返回上一页
	const goback = () => {
		uni.navigateBack({
			delta: 1
		});
	};
</script>

<style lang="scss" scoped>
.orderPage {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .order-top {
        border-radius: 0 0 25rpx 25rpx;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9;
        background-color: #fff;

        .headerNavbar {
            width: 100%;
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9;
            background-color: #fff;

            .titleBar {
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 0 20rpx;
                box-sizing: border-box;

                .title {
                    width: 100%;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 40rpx;

                    text {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: rgba(56, 56, 56, 1);
                    }

                    .active {
                        font-size: 34rpx;
                        font-weight: 500;
                        color: #000;
                    }
                }

                image {
                    width: 21rpx;
                    height: 32rpx;
                    position: fixed;
                    left: 20rpx;
                }
            }
        }
    }
    .order-content {
        width: 100%;
        .swiper-container {
            width: 100%;
            .orderPage-content {
                display: flex;
                flex-direction: column;
                width: 100%;
				.header-filter{
					width: 100vw;
					position: sticky;
					top: 0rpx;
					background-color: #fff;
					border-radius:  0 0 25rpx 25rpx;
					z-index: 8;
					.search-box {
						width: 100%;
						padding: 0rpx 50rpx;
						box-sizing: border-box;
					}
					.Select-status {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						height: 100rpx;
						box-shadow: 0 50rpx 40rpx #f5f6f7;
						text {
							display: block;
							height: 100%;
							line-height: 100rpx;
							font-size: 32rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);
						}
						.status-active {
							font-size: 34rpx;
							font-weight: 500;
							color: #000;
							border-bottom: 4rpx solid rgba(189, 125, 125, 1);
						}
					}
				}
                .orderCard-box {
					width: 100%;
                    .isNull {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        height: 45vh;
                        gap: 30rpx;

                        image {
                            width: 400rpx;
                            height: 400rpx;
                        }

                        text {
                            color: rgba(153, 153, 153, 1);
                            font-size: 28rpx;
                        }
                    }
                    .content-box {
                        width: 100%;
						padding: 50rpx 20rpx;
						box-sizing: border-box;
                        background-color: #f5f6f7;
                    }
                }
            }
        }
    }
}
</style>
